<template>
    <div class='digCurtain' v-if="diglogType">
        <div class="centerContainer" :style="{width:width}">
            <img class="digBc" src="@/assets/images/digBc.png" alt="">
            <i class="el-icon-close close" @click="close"></i>
            <div class="digTop">
                <i class="circlePoint"></i>
                <img class="digTitleBc" src="@/assets/images/titleDigBc.png" alt="">
                <span class="titleWord">{{title}}</span>
            </div>
            <div class="digContent">
               <slot></slot>
            </div>
        </div>
      
    </div>
</template>

<script>
export default {
    props:{
        title:{
            type:String,
            default:'标题'
        },
        diglogType:{
            type:Boolean,
            default:false
        },
        width:{
            type:String,
            default:()=>{
                return '50%'
            }
        }
    },
    components: {},
    data() {
        return {

        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        close(){
            console.log("5555")
            this.$emit("close")
        }
    },
  
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.digCurtain{
    position: fixed;
    top: 0;
    left: 0;
    width:100vw;
    height: 100vh;
    z-index: 999;
    background-color: rgba(0,0,0,0.3);
}
.centerContainer{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 30%;
    min-height: 300px;
    max-height: 900px;
    overflow: auto;
    padding: 6px 10px;
    .digBc{
        position:absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    .close{
       position:absolute; 
       top: 0;
       right: 0;
       z-index: 2;
       font-size: 24px;
       color: #ffffff;
       cursor: pointer;
       background: rgba(255,255,255,0.3);
    }
    .digTop{
        position: relative;
        z-index: 2;
        width: 98%;
        height: 40px;
        .circlePoint{
            position: absolute;
            left: -4px;
            top: -4px;
            z-index: 2;
            display: block;
            content: " ";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #F9B22A;
        }
        .digTitleBc{
            position: absolute;
            z-index: 1;
            width:100%;
            height: 40px;
        }
        .titleWord{
            padding: 0 10px;
            position: relative;
            z-index: 2;
            font-size: 26px;
            line-height:40px;
            color: #F9B22A;
        }
    }
    .digContent{
        position: relative;
        z-index: 2;
        width:100% ;
        min-height: 100px;
        margin-top: 10px;
    }
}

</style>